<template>
  <div id="tmpl">
    <!--图片分类  -->
    <div id="cate">
      <ul v-bind:style="{width: totalwidth + 'px' }">
        <li @click="getimages(0)">全部</li>
        <li v-for="item in cates" v-text="item.title" @click='getimages(item.id)'></li>
      </ul>
    </div>
    <!--图片列表  -->
    <div id="imglist">
      <ul>
        <li v-for="item in list">
          <router-link v-bind="{to:'/imgshare/imgdetail/'+item.id}">
            <img v-lazy="item.img_url">
          <div id="desc">
            <h5 v-text="item.title"></h5>
            <p v-text="item.zhaiyao"></p>
          </div>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
  import common from "../../kits/common.js"
  import {
    Toast
  } from 'mint-ui';
  export default {
    data() {
      return {
        list: [],
        cates: [],
        totalwidth: 375,
      }
    },
    created() {
      var all=0;//获取所有数据
      this.getcates();
      this.getimages(all);

    },
    computed: {
        
    },
    methods: {
      getimages: function (cateid) {
        cateid=cateid||0;
        var url ='http://182.254.146.100:8899/api/getimages/'+cateid;
        this.$http.get(url).then(function (res) {
          console.log(res)
          var body = res.body;
          if (body.status != 0) {
            Toast(body.message);
            return;
          }
          this.list = body.message;
        })
      },
      getcates() {
        var url ='http://182.254.146.100:8899/api/getimgcategory';
        this.$http.get(url).then(function (res) {
          var body = res.body;
          if (body.status != 0) {
            Toast(body.message);
            return;
          }
          this.cates = body.message;
          // 实现当前分类数据所在的ul的总宽度
          var v = 62;
          var count = body.message.length + 1;
          this.totalwidth = v * count;
        })
      }
    }

  }
</script>
<style scoped>
  #cate {
    width: 320px;
    max-width: 320px;
    overflow-x: auto;
    /* overflow-x: hidden; */
    /* scrollbar-face-color: transparent; */
  }

  #cate ul {
    margin: 0;
    padding-left: 10px;
  }

  #cate li {
    list-style: none;
    display: inline-block;
    color: #0094ff;
    font-size: 14px;
    padding-left: 6px;
  }
  #imglist{

  }
  #imglist ul{
    padding-left:0px; 
  }
   #imglist li{
     list-style: none;
     position: relative;
     cursor: pointer;
   }
   #imglist li image[lazy=loading]{
     width: 100%;
     height: 300px;
   }
   #desc{
     width: 100%;
     background-color: rgba(0, 0, 0, .2);
     position: absolute;
     bottom: 2px;
     left: 0px;
   }
   #desc h5{
     padding-right: 20px;
     color: #fff;
     font-weight: bold;
   }
   #desc p{
     color: #fff;
     padding-right: 20px;
   }
</style>